<template>
  <div class="container">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span
          >正在为<span style="color: red;">[{{ itemName }}]</span>设置规格</span
        >
      </div>
      <vue-sku
        v-if="showSkuEditor"
        v-model="specOptions"
        :sku-tree="specNames"
        :on-fetch-group="fetchSkuGroup"
        :on-fetch-sku="fetchSku"
        :on-create-group="createGroup"
        :on-create-sku="createSku"
        @on-change="onSkuChange"
      />
      <br />
      <sku-table
        :data="specOptions"
        :flatten="skuList"
        @on-change-data="handleChangeData"
      >
      </sku-table>
      <div style="text-align: center;">
        <el-button
          style="width: 280px;margin-top: 22px;"
          type="danger"
          size="medium"
          @click="onSaveSkuList"
          >保存</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import { Sku, SkuTable } from "@/components/Sku";
import {
  addItemSpec,
  addSpecProps,
  getItemSpecList,
  getSpecProps
} from "@/api/admin-api/SpecApi";
import { getItemSkuList, mergeItemSkus } from "@/api/admin-api/ItemSkuApi";
export default {
  name: "ItemSkuEdit",
  components: {
    "vue-sku": Sku,
    "sku-table": SkuTable
  },
  props: {
    itemId: [],
    itemName: []
  },
  data() {
    return {
      showSkuEditor: false, //是否显示sku编辑器，防止数据延迟
      specNames: [], //规格名列表
      specOptions: [], // 规格和选项列表
      data: [],
      skuList: []
    };
  },
  methods: {
    onSaveSkuList() {
      this.$loading();
      mergeItemSkus(this.itemId, this.data).then(() => {
        this.$message.success("保存成功");
        this.$loading().close();
        setTimeout(() => {
          this.$router.go(0);
        }, 500);
      });
    },
    loadSpecList() {
      getItemSpecList().then(data => {
        this.specNames = data;
        if (this.itemId) {
          this.loadItemSkuList();
        } else {
          this.showSkuEditor = true;
        }
      });
    },
    fetchSkuGroup() {
      //获取可选的规格名
      return new Promise(resolve => {
        resolve(this.specNames);
      });
    },
    fetchSku(specId) {
      //获取指定规格的属性值
      return new Promise(resolve => {
        getSpecProps(specId, this.itemId).then(data => {
          resolve(data);
        });
      });
    },
    createGroup(specName) {
      //创建规格
      return new Promise((resolve, reject) => {
        if (specName) {
          addItemSpec({ text: specName })
            .then(spec => {
              console.log("返回规格ID", spec.id);
              resolve(spec.id);
            })
            .catch(err => {
              reject(err);
            });
        } else {
          reject(new Error());
        }
      });
    },

    createSku(props) {
      console.log("props", props);
      return new Promise((resolve, reject) => {
        let specId = "";
        let specValues = props.data.map(specValue => {
          specId = props.id;
          return {
            specId: props.id,
            text: specValue,
            itemId: this.itemId
          };
        });
        addSpecProps(specId, specValues)
          .then(resp => {
            console.log(resp);
            resolve(resp);
          })
          .catch(err => reject(err));
      });
    },
    onSkuChange(data) {
      // console.log(data);
    },
    handleChangeData(data) {
      this.data = data;
      console.log("table change", data);
    },
    loadItemSkuList() {
      getItemSkuList(this.itemId).then(data => {
        console.log("data", data);
        this.showSkuEditor = true;
        this.specOptions = data.specTree;
        console.log("this.specOptions", this.specOptions);
        this.skuList = data.skuList;
      });
    }
  },
  mounted() {
    this.loadSpecList();
    console.log("itemId", this.itemId);
  }
};
</script>

<style scoped></style>
